export const addDialog = (editor) => {
  const { Components } = editor;

  Components.addType("addDialog", {
    model: {
      defaults: {
        name: "addDialog",
        attributes: {
          'data-gjs-type':'addDialog'
        },
        components: [
          {
            tagName: "button",
            attributes: { class: "open" },
            content: "点击打开弹窗",
            components: [
              {
                type: 'text',
                content: '打开弹窗'
              }
            ],
          },
          {
            type: 'div',
            attributes: { class: 'modal' },
            components: [
              {
                type: 'div',
                // 当拖动图片时，会通过.case-card-image类来更改样式，
                // 但是没有设置class时，会使用随机生成的id来进行属性选择器修改宽高
                attributes: {
                  class: 'modal-content',
                },
                components: [
                  {
                    type: 'div',
                    attributes: { class: 'dialog-header'},
                    components: [
                      {
                        type: 'text',
                        content: '弹窗标题',
                        attributes: { class: 'dialogTitle' },
                      },
                      {
                        type: 'text',
                        content: '&times;',
                        attributes: { class: 'close' },
                      },
                    ],
                  },
                  {
                    type: 'div',
                    attributes: { class: 'dialog-content' },
                    components: [
                      {
                        type: 'text',
                        content: '弹窗中的内容...',
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
        script() {
          var that = this;
          var modal = that.querySelector(".modal");
          var btn = that.querySelector(".open");
          var span = that.querySelector(".close");
          btn.onclick = function () {
            modal.style.display = "block";
          };
          span.onclick = function () {
            modal.style.display = "none";
          };
          modal.onclick = function (e) {
            if (e.target === modal) {
              modal.style.display = "none";
            }
          };
        },
        styles: `
          .open{
            cursor: pointer;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
          }
          .open:hover {
            background-color: #0056b3;
          }
          .modal {
            display: none;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
          }
          .modal-content {
            background: #fefefe;
            margin: 15% auto;
            padding: 20px 10px; 
            border: 1px solid #888;
            width:40%;
            height:40%;
            min-width: 300px;
            min-height: 250px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .dialog-header{
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:40px;
            border-bottom: 1px solid rgb(170, 170, 170);
          }
          .dialogTitle{
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 16px;
          }
          .dialog-content{
            margin-top: 40px;
            width: 100%;
            height: 100%;
          }
          .close {
            position: absolute;
            top: 0;
            right: 10px;
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
          }

          /* 关闭特效 */
          .close:hover,
          .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
          }

          @keyframes window-open {
            0% {
              opacity: 0;
              -webkit-transform: scale3d(0, 0, 1);
            }

            100% {
              opacity: 1;
              -webkit-transform: scale3d(1, 1, 1);
            }
          }
        `,
      },
    },
  });

  // 注册 addDialog 组件
  editor.BlockManager.add("addDialog", {
    label: "弹窗组件",
    category: "其他类",
    media: `<svg t="1721959267988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5107" width="30" height="30"><path d="M415.288889 642.844444c0-5.688889-5.688889-11.377778-5.688889-17.066666-5.688889-5.688889-11.377778-5.688889-17.066667-5.688889l-216.177777 11.377778c-11.377778 0-22.755556 11.377778-22.755556 28.444444 0 5.688889 5.688889 11.377778 5.688889 17.066667 5.688889 0 11.377778 5.688889 17.066667 5.688889l153.6-5.688889-244.622223 244.622222c-5.688889 5.688889-5.688889 11.377778-5.688889 17.066667 0 5.688889 0 11.377778 5.688889 17.066666 5.688889 5.688889 11.377778 5.688889 17.066667 5.688889 5.688889 0 11.377778 0 17.066667-5.688889l244.622222-244.622222 5.688889 164.977778c0 5.688889 5.688889 11.377778 5.688889 17.066667 5.688889 5.688889 11.377778 5.688889 17.066666 5.688888 5.688889 0 11.377778-5.688889 17.066667-5.688888 5.688889-5.688889 5.688889-11.377778 5.688889-17.066667v-233.244445z m0 0" p-id="5108"></path><path d="M750.933333 1018.311111h-568.888889c-96.711111 0-170.666667-79.644444-170.666666-170.666667v-568.888888c0-45.511111 17.066667-91.022222 51.2-119.466667 34.133333-34.133333 73.955556-51.2 119.466666-51.2h261.688889v358.4c0 62.577778 51.2 108.088889 108.088889 108.088889h364.088889v273.066666c5.688889 96.711111-73.955556 170.666667-164.977778 170.666667zM182.044444 170.666667c-62.577778 0-108.088889 45.511111-108.088888 108.088889v568.888888c0 62.577778 51.2 108.088889 108.088888 108.088889h568.888889c62.577778 0 108.088889-51.2 108.088889-108.088889v-210.488888H557.511111c-96.711111 0-170.666667-79.644444-170.666667-170.666667V170.666667H182.044444z m0 0" p-id="5109"></path><path d="M1012.622222 102.4v301.511111c0 68.266667-34.133333 96.711111-96.711111 96.711111h-301.511111c-68.266667 0-96.711111-34.133333-96.711111-96.711111V102.4C517.688889 34.133333 551.822222 5.688889 614.4 5.688889h301.511111c62.577778 0 96.711111 28.444444 96.711111 96.711111z m0 0" p-id="5110"></path></svg>`,
    content: {
      type: "addDialog",
    },
  });
};
